<script lang="ts" setup>
import HomePanel from "./HomePanel.vue";
import { findNewAPI } from "@/apis/home";
import { onMounted, ref } from "vue";

const activeIndex = ref(0); // 默认激活第一个Tab

import Swiper from "swiper/bundle";

// import styles bundle
import "swiper/css/bundle";
onMounted(() => {
  // init Swiper:
  const swiper2 = new Swiper(".swiper2", {
    // Optional parameters
    // direction: "vertical",
    // 循环模式选项
    loop: true,
    // autoplay: {
    //   delay: 2500,
    //   disableOnInteraction: false,
    // },
    // 设置平滑
    slidesPerView: 4,
    spaceBetween: 17,
    // 设置能够同时显示的数量（可设置 auto）
    speed: 500,

    // Navigation arrows
    navigation: {
      nextEl: ".introduction_bottom2 .swiper-button-next",
      prevEl: ".introduction_bottom2 .swiper-button-prev",
    },

    // And if we need scrollbar
    scrollbar: {
      el: ".swiper-scrollbar",
    },
  });
});
</script>

<template>
  <div class="functionIntroduction">
    <div style="padding: 70px 0 50px">
      <div class="introduction_bottom2" style="display: flex">
        <div style="font-size: 32px">合作机构</div>
        <img
          src="@/assets/images/home/sun.png"
          style="width: 34px; height: 34px"
          alt=""
        />
      </div>
      <div
        class="introduction_bottom2"
        style="font-size: 32px; color: #d3d6dd; margin-top: -22px; opacity: 0.4"
      >
        Partners
      </div>
    </div>
    <div class="introduction_bottom2">
      <!-- Slider main container -->
      <div class="swiper-button-prev"></div>

      <div class="swiper swiper2">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper" style="height: 96.5% !important">
          <!-- Slides -->
          <div class="swiper-slide" style="padding: 25px">
            <img
              src="@/assets/images/home/Partners_one.png"
              alt=""
              style="width: 173.26px; height: 109.2px"
            />
            <div style="color: #34b8fa; margin-top: 7px; text-align: center">
              印象派美术培训
            </div>
            <div style="margin-top: 7px">
              2024荣获五星级校外培训机构荣誉等多项奖
            </div>
          </div>
          <div class="swiper-slide" style="padding: 25px">
            <img
              src="@/assets/images/home/Partners_two.png"
              alt=""
              style="width: 173.26px; height: 109.2px"
            />
            <div style="color: #34b8fa; margin-top: 7px; text-align: center">
              印象派美术培训
            </div>
            <div style="margin-top: 7px">
              2024荣获五星级校外培训机构荣誉等多项奖
            </div>
          </div>
          <div class="swiper-slide" style="padding: 25px">
            <img
              src="@/assets/images/home/Partners_three.png"
              alt=""
              style="width: 173.26px; height: 109.2px"
            />
            <div style="color: #34b8fa; margin-top: 7px; text-align: center">
              印象派美术培训
            </div>
            <div style="margin-top: 7px">
              2024荣获五星级校外培训机构荣誉等多项奖
            </div>
          </div>
          <div class="swiper-slide" style="padding: 25px">
            <img
              src="@/assets/images/home/Partners_four.png"
              alt=""
              style="width: 173.26px; height: 109.2px"
            />
            <div style="color: #34b8fa; margin-top: 7px; text-align: center">
              印象派美术培训
            </div>
            <div style="margin-top: 7px">
              2024荣获五星级校外培训机构荣誉等多项奖
            </div>
          </div>
          <div class="swiper-slide" style="padding: 25px">
            <img
              src="@/assets/images/home/Partners_one.png"
              alt=""
              style="width: 173.26px; height: 109.2px"
            />
            <div style="color: #34b8fa; margin-top: 7px; text-align: center">
              印象派美术培训
            </div>
            <div style="margin-top: 7px">
              2024荣获五星级校外培训机构荣誉等多项奖
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.functionIntroduction {
  background-color: #fff;
  height: 740px;
  background-size: contain;
  //   background: url("@/assets/images/home/student_bg.png") no-repeat center/cover;
  .swiper2 {
    width: 1136px;
    height: 222.21px;
    .swiper-slide {
      display: flex;
      flex-direction: column;
      align-items: center;
      //   background: #ffffff;
      //   border-radius: 12px 12px 12px 12px;
      //   width: 360px;
      //   height: 405px;
    }
  }

  .introduction_bottom2 {
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
    .swiper-button-prev,
    .swiper-button-next {
      position: unset !important;
      top: unset !important;
      margin-top: -11px;
      width: 33px;
      height: 38px;
      color: #ffffff;
      background-color: rgba(40, 39, 39, 0.1);
    }
    .swiper-button-prev,
    .swiper-rtl .swiper-button-prev {
      margin-right: 10px;
    }
    .swiper-button-next,
    .swiper-rtl .swiper-button-prev {
      margin-left: 10px;
    }
    .swiper-button-prev:after,
    .swiper-button-next:after {
      font-size: 26px;
    }
  }
  .function {
    width: 88px;
    height: 36px;
    margin-left: 20px;
    line-height: 36px;
    cursor: pointer;
    text-align: center;
    border: 1px solid #dddddd;
    border-radius: 18px 18px 18px 18px;
    box-shadow: 0px 1px 4px 0px rgba(102, 102, 102, 0.25);
  }
  .active-tab {
    background: linear-gradient(to bottom, #a7dffb, #1ca9eb);
  }
}
</style>
